<template>
  <div class="login-box">
    <h1>七牛云相册登陆</h1>
    <div class="input-box">
      <div class="choose">
        <input
          type="checkbox"
          name="yonghu"
          id=""
          :checked="ischecked1"
          @click="checked1"
        />
        <span>用户</span>
        <input
          type="checkbox"
          name="guanli"
          id="guanli"
          :checked="ischecked2"
          @click="checked2"
        />
        <span>管理</span>
      </div>

      <!-- 输入框 -->
      <div class="input-text">
        <span class="iconfont icon-mine"></span>
        <input
          type="text"
          placeholder="用户名"
          class="user"
          v-model="user_name"
        />
      </div>
      <div class="input-text">
        <span class="iconfont icon-lock"></span>
        <input
          type="password"
          placeholder="密码"
          class="password"
          v-model="user_password"
        />
      </div>
      <div class="input-btn" @click="login">登陆</div>
    </div>

    <div class="sign-up" id="register" @click="register">立即注册</div>

    <div class="sign-up" id="forgrt" @click="forget">忘记密码</div>
  </div>
</template>

<script>
export default {
  // 数据源节点
  data() {
    return {
      // 这是用户和管理的选择框
      ischecked1: false,
      ischecked2: false,
      // 这是登录表单中的数据
      user_name: "admin",
      user_password: "666666",
    }
  },
  // 方法节点
  methods: {
    // 用户点击登录模块
    checked1() {
      this.ischecked1 = true
      if (this.ischecked2 === true) {
        this.ischecked2 = false
      }
    },
    // 管理点击登录模块
    checked2() {
      this.ischecked2 = true
      if (this.ischecked1 === true) {
        this.ischecked1 = false
      }
    },
    //   点击登录模块函数
    async login() {
      // 判断用户选的的身份
      if (this.ischecked1 == true) {
        // 如果是用户，就到用户管理模块
        const { data: res } = await this.$http.post("user/login", {
          user_name: this.user_name,
          user_password: this.user_password,
        })
        // 将相应的数据打印到控制台上
        console.log(res)
        window.sessionStorage.setItem("token", res.token)
        if (res.status == 0) {
          this.$router.push("/home")
          return this.$message.success("登录成功")
        }
        if (res.status == 1) return this.$message.error("登录失败")
        if (res.status == 2) return this.$message.error("你已被封禁")
      } else if (this.ischecked2 == true) {
        // 如果是管理，就登录到管理员模块
         const { data: res } = await this.$http.post("admin/login", {
          user_name: this.user_name,
          user_password: this.user_password,
        })
        // 将相应的数据打印到控制台上
        console.log(res)
        window.sessionStorage.setItem("token", res.token)
        if (res.status == 0) {
          this.$router.push("/admin")
          return this.$message.success("登录成功")
        }
        if (res.status == 1) return this.$message.error("登录失败")
      } else {
        alert("请选择你登录的身份")
      }
    },
    // 点击进入注册模块注册新用户
    register() {
      this.$router.push("/register")
    },

    forget() {
      console.log("123")
    },
  },
}
</script>

<style lang="less" scoped>
.choose {
  position: relative;
  margin-top: 18px;
  width: 170px;

  span {
    color: white;
  }

  #guanli {
    margin-left: 60px;
  }
}

#register {
  cursor: pointer;
  color: white;
}

#register:hover {
  transform: scale(1.1);
}

#forgrt {
  cursor: pointer;
  margin-left: 20px;
  color: white;
}

#forgrt:hover {
  transform: scale(1.1);
}

* {
  padding: 0;
  // margin: 0 auto;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background: url("@/assets/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.login-box {
  display: flex;
  margin: 40px auto;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  width: 600px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 10px;
  padding: 20px 50px;
  border-radius: 20px;
}
.login-box h1 {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 30px;
}
.login-box .input-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transform: translateY(-35px);
}

.login-box .input-box .input-text {
  width: 100%;
  display: flex;
  justify-content: center;
}
.login-box .input-box .input-text span {
  color: white;
  font-size: 18px;
  margin-top: 20px;
}
.login-box .input-box .input-text input {
  border: 0;
  padding: 6px;
  border-bottom: 1px solid white;
  background-color: #ffffff00;
  color: #fff;
  margin-top: 20px;
}
.login-box .input-box .input-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  width: 145px;
  height: 25px;
  color: #fff;
  background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
  border-radius: 25px;
  cursor: pointer;
}
.login-box .input-box .sign-up {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  color: white;
  font-size: 15px;
  pointer-events: none;
}
.login-box .input-box .sign-up a {
  color: #3498db;
  text-decoration: none;
  cursor: pointer;
}
</style>
